<template>
	<view class="container">
		<view class="shangchuan" @tap="add">
			<image class="sc-img" src="@/static/img/照相机.png" mode=""></image>
		</view>
		<view v-for = "(d,i) in list" class="tupian">
			<view class="shanchu" @tap="list.splice(i,1)">X</view>
			<image class="base-img" :src="baseUrl + d"/>
			
		</view>
	</view>
</template>

<script>
	import {baseUrl,FILE_BASE_URL} from '../.././config/index.js'
	export default {
		data() {
			return {
				list:[],
				baseUrl:FILE_BASE_URL
			}
		},
		methods: {
			add(){
				//选择照片，然后上传，等后端接口返回文件路径后在push
				const that = this
				uni.chooseImage({
					count:1,
					success(res){
						uni.uploadFile({
							url:baseUrl + 'upload/add',
							header:{
								Authorization:uni.getStorageSync('token')
							},
							filePath:res.tempFilePaths[0],
							name:'file',
							timeout:5000,
							success({data}){
								// that.list.push(data);
								that.list.push(JSON.parse(data).data);
								that.$emit('change',that.list.map(item =>({
									url:item
								})));
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.container{
		width: 100%;
		height: 100%;
		display: flex;
		flex-wrap:wrap;
		// background-color: aqua;
		.shangchuan{
				width: 100rpx;
				height: 100rpx;
				margin-top: 12rpx;
				border: 1px solid #898989;
				border-radius: 10rpx;
				margin-left: 25rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				.sc-img{
					width: 45rpx;
					height: 45rpx;
				}
			}
			.tupian{
				width: 120rpx;
				height: 112rpx;
				margin-left: 40rpx;
				display: flex;
				.shanchu{
						width: 40rpx;
						height:40rpx;
						text-align: center;
						line-height: 40rpx;	
						margin-left: 11%;
						position: fixed;
						z-index: 1;
						font-size: 20rpx;
						border-radius: 50rpx;
						color: #fff;
						background-color: #a3a5a8;
				}
				.base-img{
					width: 100rpx;
					height: 100rpx;
					margin-top: 12rpx;
					border-radius: 15rpx;
				}
			}
	}
		
</style>
